<template>
  <page-wrap stay-still :bgColor="topBg" :dark="false" back hideTab title="校企洽谈">
    <view class="content-desc">
      <view class="content-title">
        校企洽谈
      </view>
      <view class="content-text">
        <view class="time-tabs">
          <view class="tab-item" :class="{'active': activeIndex == 0}" @click="handleChange(0)">上午10:00-12:00</view>
          <view class="tab-item" :class="{'active': activeIndex == 1}" @click="handleChange(1)">下午14:00-16:00</view>
        </view>
        <view class="school-list">
          <view class="school-list-item" v-for="item,index in schoolList" :key="index">
             <image class="school-logo" mode='aspectFit' :src="item.logo"></image>
             <view class="school-name text-overflow-2">{{item.name}}</view>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>
<script>
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  data() {
    return {
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      content: '',
      sharePath: "/pagesSub/activity/sxh/index",
      shareTitle: "第28届全国高校毕业生秋季就业双选会 - 一览职业",
      schoolList: [],
      schoolList1: [
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/哈尔滨工业大学(深圳).png',
          name: '哈尔滨工业大学（深圳）',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/深圳北理莫斯科大学.png',
          name: '深圳北理莫斯科大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/深圳技术大学.png',
          name: '深圳技术大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/深圳城市职业学院.png',
          name: '深圳城市职业学院',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/香港中文大学.png',
          name: '香港中文大学（深圳）',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/南方科技大学.png',
          name: '南方科技大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/华南农业大学.png',
          name: '华南农业大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/广东新安职业技术学院.png',
          name: '广东新安职业技术学院',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/暨南大学（深圳）.png',
          name: '暨南大学（深圳）',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/深圳大学.png',
          name: '深圳大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/深圳职业技术大学.png',
          name: '深圳职业技术大学',
        }
      ],
      schoolList2: [
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/中山大学.png',
          name: '中山大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/广东财经大学.png',
          name: '广东财经大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/东莞理工学院.png',
          name: '东莞理工学院',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/汕头大学.png',
          name: '汕头大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/广东海洋大学.png',
          name: '广东海洋大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/江西财经大学.png',
          name: '江西财经大学',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/广东水利电力职业技术学院.png',
          name: '广东水利电力职业技术学院',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/珠海科技学院.png',
          name: '珠海科技学院',
        },
        {
          logo: this.$imgBaseSelf+'zph/sxh/school/北京师范大学.png',
          name: '北京师范大学（珠海校区）',
        }
      ],
      activeIndex: 0,
    };
  },
  created() {
    this.schoolList = this.schoolList1;
  },
  methods: {
    handleChange(current) {
      this.activeIndex = current;
      if (this.activeIndex == 0) {
        this.schoolList = this.schoolList1;
      } else if (this.activeIndex == 1) {
        this.schoolList = this.schoolList2;
      }
    },
  },
  
};
</script>
<style lang="scss" scoped>
.content-desc {
  padding-top: 270rpx;
  min-height: 1375rpx;
  background-image: url($img-base + "zph/sxh/common-bg.png");
  background-size: 100%;
  background-repeat: no-repeat;

  .content-title {
    position: relative;
    top: 34rpx;
    width: 424rpx;
    margin: -34rpx auto 0;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    line-height: 70rpx;
    background-image: url($img-base + 'zph/sxh/title-bg.png');
    background-size: 100% 100%;
  }

  .time-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 37rpx;
    font-size: 32rpx;
    color: #888888;

    .active {
      color: #1B74F4;
    }
  }

  .content-text {
    width: 686rpx;
    margin: 0 auto;
    padding: 68rpx 24rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
  }

  .school-list {
    display: flex;
    flex-wrap: wrap;
  }

  .school-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    &:nth-of-type(2n) {
      margin-left: 24rpx;
    }

    .school-name {
      margin-left: 8rpx;
      width: 210rpx;
      font-size: 26rpx;
      color: #333333;
    }
  }

  .school-logo {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
  }
}
</style>